<template>
      <ScaleBox
        :width="1920"
        :height="1080"
        :delay="100"
        :isFlat="true"
      >
        <template>
        <div id="viewer" class="page-container">
          <div class="top-shadow"></div>
          <div class="bottom-shadow"></div>
          <div class="left-shadow"></div>
          <div class="right-shadow"></div>
          <div class="header">
            <div class="header-info">
              <div class="header-info-left">
                <div class="weather">
                <div class="weather-text">
                  <span class="info-bold" style="margin-right:8px">晴</span>
                  <span class="info-noBold">23°C-35°C</span>
                  </div>
              </div>
              <div class="line"></div>
              </div>
              <div class="title">
                <!-- <h3 class="title-text">光伏智能数字平台</h3> -->
                <div class="title-text">数农IOT数字农业平台</div>
              </div>
              <div class="header-info-right">
                <div class="line-right"></div>
                <div class="date">
                  <div class="date-text">
                    <div class="date-year">{{formattedTime.year}}</div>
                    <div class="date-time">{{formattedTime.time}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="content"> -->
            <div class="content-left">
              <div class="insect">
                <titleChart title="虫情监测" />
                <windowTab :tabList="tabListInsect" @changeTab="changeTab" type="001" />
                <div class="insect-number">
                  <div class="insect-number-item">
                    <div class="number-item-top">
                      <span class="num">6</span>
                      <span class="danwei">头</span>
                    </div>
                    <div class="number-item-btm">昨日识别数量</div>
                  </div>
                  <div class="insect-number-item">
                    <div class="number-item-top">
                      <span class="num">312</span>
                      <span class="danwei">头</span>
                    </div>
                    <div class="number-item-btm">累计识别数量</div>
                  </div>
                </div>
                <div class="line-chart">
                  <lineChart :style1="{width:'320',height:'170'}" />
                </div>
              </div>
              <div class="meteorologicalPhenomena">
                <titleChart title="气象监测" />
                <windowTab :tabList="tabListPhenomena" @changeTab="changeTab" type="003" />
                <div class="weather-box">
                  <div class="weather-item" v-for="(item,index) in weatherList" :key="index">
                    <div class="item-img">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="item-desc">
                      <div class="item-title">{{ item.title }}</div>
                      <div class="item-content">{{ item.content }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video">
                <titleChart title="苗情监测" />
                <div class="video-box">
                  <div class="video-tab">
                    <div class="video-tab-item"
                    @click="changeTabVideo(item,i)"
                    v-for="(item, i) in tabListVideo" :key="i"
                    :class="currVideoIndex === i ? 'active-tab': ''"
                    >{{item.name}}</div>
                  </div>
                  <div class="video-content">
                    <vue-flv-player v-if="isVideo" class="video-flv" :autoplay="false" :controls="true" :muted="true" ref="myPlayer" :source="videoSrc"  type="flv" />
                  </div>
                </div>
              </div>
            </div>
            <div class="content-center">
              <div class="earlyWarning">
                <titleChart title="预警情况" />
                <div class="earlyWarning-box">
                  <div class="pieChart">
                    <pieChart :stylePie="{width:'140',height:'140'}" />
                  </div>
                  <div class="earlyWarning-desc">
                    <div class="earlyWarning-desc-item">
                      <div class="num">56件</div>
                      <div class="desc">待处理预警</div>
                    </div>
                    <div class="earlyWarning-desc-item">
                      <div class="num">88件</div>
                      <div class="desc">已处理预警</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="early-warning-list">
                <titleChart title="预警列表" />
                <div class="scroll-list">
                  <scrollList />
                </div>
              </div>
              <div class="monitor">
                <titleChart title="监测指标" />
                <div class="charts-box">
                  <div class="charts-item" v-for="(item,index) in monitorList" :key="index" >
                    <div class="charts-item-content" :style="{borderColor:item.color}">
                      <pieChart2 :stylePie="{width:'80',height:'80'}" :pieData="item" />
                    </div>
                    <div class="charts-item-desc">{{item.desc}}</div>
                  </div>
                </div>
                <div class="monitor-btm">
                  <div class="monitor-btm-text">负氧子含量</div>
                  <div class="monitor-btm-num">576个/cm³</div>
                </div>
              </div>
            </div>
            <div class="content-right">
              <div class="devices-number">
                <div class="devices-number-header">
                  <div class="devices-number-icon">
                    <img src="@/assets/weather/weather12.png" alt="">
                  </div>
                  <div class="devices-number-text">园区设备总数</div>
                  <div class="devices-number-num">
                    <span style="font-size:36px;margin-right:4px">5</span>
                    <span style="font-size:20px">台</span>
                  </div>
                </div>
                <div class="devices-number-desc">
                  <div class="devices-number-desc-item">
                    <div class="devices-number-desc-num">
                      <span style="font-size:24px;margin-right:4px">5000</span>
                      <span style="font-size:12px">亩</span>
                    </div>
                    <div class="devices-number-desc-text">监测辐射面积</div>
                  </div>
                  <div class="devices-number-desc-item">
                    <div class="devices-number-desc-num">
                      <span style="font-size:24px;margin-right:4px">30</span>
                      <span style="font-size:12px">天</span>
                    </div>
                    <div class="devices-number-desc-text">累计监测时长</div>
                  </div>
                  <div class="devices-number-desc-item">
                    <div class="devices-number-desc-num">
                      <span style="font-size:24px;margin-right:4px">3743</span>
                      <span style="font-size:12px">条</span>
                    </div>
                    <div class="devices-number-desc-text">监测数据总量</div>
                  </div>
                </div>
              </div>
              <div class="soil-monitoring">
                <titleChart title="土壤监测" />
                <windowTab :tabList="tabListSoil" @changeTab="changeTab" type="004" />
                <div class="weather-box">
                  <div class="weather-item" v-for="(item,index) in soilList" :key="index">
                    <div class="item-img">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="item-desc">
                      <div class="item-title">{{item.title}}</div>
                      <div class="item-content">{{item.content}}</div>
                    </div>
                  </div>
                </div>
                <div class="line-chart">
                  <lineChart :style1="{width:'320',height:'200'}"   title='最近30天墒情走势'/>
                </div>
              </div>
              <div class="spore-monitoring">
                <titleChart title="孢子监测" />
                <windowTab :tabList="tabListspore" @changeTab="changeTab" />
                <div class="spore-monitoring-content">
                  <img src="@/assets/baozi.png" alt="">
                </div>
              </div>
            </div>
          <!-- </div>  -->

        </div>

      </template>
    </ScaleBox>
</template>

<script>
// import * as echarts from 'echarts';
import lineChart from '@/components/echars/line.vue';
import pieChart from '@/components/echars/pie.vue';
import pieChart2 from '@/components/echars/pie2.vue';
import titleChart from '@/components/title.vue';
import windowTab from '@/components/windowTab.vue';
import scrollList from '@/components/scrollList.vue'
import ScaleBox from 'vue2-scale-box'
import {Viewer} from 'photo-sphere-viewer' // 引入组件
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' // 引入样式
import {obtainDeviceData,testDP,ryCreateFlvLive} from "@/api/login";
import vueFlvPlayer from 'vue-flv-player'
// 自动播放插件
// import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
export default {
  name: 'BigPage',
  components:{ScaleBox,lineChart,titleChart,pieChart,windowTab,scrollList,pieChart2,vueFlvPlayer},
  data() {
    return {
      videoSrc:"",
      isVideo:true,
      viewer:'', // 声明一个视图对象，以便后期全局进行组件的操作
      imgurl1:require('@/assets/bigpage.jpg'), // 全景图的图片
      tabListInsect:[
        {name:'虫情监测 (三期)', active:false},
        // {name:'虫情监测 (三期1)', active:true},
        // {name:'虫情监测 (三期2)', active:false},
        // {name:'虫情监测 (三期3)', active:false},
        // {name:'虫情监测 (三期4)', active:false},
      ],
      tabListPhenomena:[
        {title:'气象监测 (三期)', active:false},
        {title:'气象监测 (三期)', active:true},
        {title:'气象监测 (三期)', active:false},
      ],
      tabListSoil:[
        {title:'土壤监测 (三期)', active:false},
        {title:'土壤监测 (三期)', active:true},
        {title:'土壤监测 (三期)', active:false},
      ],
      tabListspore:[
        {name:'孢子 (三期)', active:false},
        // {name:'孢子 (三期)', active:true},
        // {name:'孢子 (三期)', active:false},
      ],
      tabListVideo:[],
      currVideoIndex: 0,
      videoObj:null,
      monitorList:[
        {
          desc:'病虫害风险',
          color:'#00B23C',
          title:'优'
        },
        {
          desc:'作物生长适宜度',
          color:'#D4871C',
          title:'良'
        },
        {
          desc:'空气质量',
          color:'#D4351C',
          title:'差'
        },

      ],
      soilList:[
        {
          title:'15.9°C',
          content:'土壤温度',
          key:'soilT',
          img:require('@/assets/weather/weather1.png')
        },
        {
          title:'6.8',
          content:'土壤ph值',
          key:'dPH',

          img:require('@/assets/weather/dPH.png')
        },
        {
          title:'42.3%',
          content:'土壤湿度',
          key:'soilH',

          img:require('@/assets/weather/soilH.png')
        },
        {
          title:'561s',
          content:'土壤导电率',
          key:'soilH',

          img:require('@/assets/weather/soilC.png')
        }
      ],
      weatherList:[
        {
          title:'15.9°C',
          content:'空气温度',
          key:'airT',
          img:require('@/assets/weather/weather1.png')
        },
        {
          title:'42.2%',
          content:'空气湿度',
          key:'airH',
          img:require('@/assets/weather/weather7.png')
        },
        {
          title:'68.3°',
          content:'风向',
          key:'',
          img:require('@/assets/weather/weather3.png')
        },
        {
          title:'5.9m/s',
          content:'风速',
          key:'windD',
          img:require('@/assets/weather/weather8.png')
        },
        {
          title:'23mm',
          content:'降雨量',
          key:'rainF',
          img:require('@/assets/weather/weather4.png')
        },
        {
          title:'6.8Lux',
          content:'光照强度',
          key:'ill',
          img:require('@/assets/weather/weather9.png')
        }
      ],
      formattedTime:{
        year:'',
        time:''
      }
    }
  },
  methods: {
    // 切换视频
    changeTabVideo(item,i) {
      this.isVideo = false
      this.currVideoIndex = i
      // this.$refs.myPlayer.source = ''
      setTimeout(() => {
        this.videoSrc = item.flv
        this.isVideo = true
      }, 100)
    },
    getObtainDeviceData(id,type) {
      obtainDeviceData(id).then(res => {
        res.data.forEach(item => {
          if(type === '004'){
             this.soilList.forEach((soil, i) => {
              if(soil.key === item.circuit){
                soil.title = item.newestData
                if(item.unit){
                  soil.title += item.unit
                }
              }
            })
          }
          console.log(this.soilList,'soilList');

          if(type === '003'){
            this.weatherList.forEach((soil, i) => {
              if(soil.key === item.circuit){
                soil.title = item.newestData
                if(item.unit){
                  soil.title += item.unit
                }
              }
            })
          }
          if(type === '002'){
            console.log('video', item)
          }

        })
      })
    },
    obtainDeviceType4() {
      testDP({productType:'004'}).then(res => {
        this.tabListSoil = res.data
        this.getObtainDeviceData(res.data[0].equipmentCode, '004')
      })
    },
    obtainDeviceType3() {
      testDP({productType:'003'}).then(res => {
        this.tabListPhenomena = res.data
        this.getObtainDeviceData(res.data[0].equipmentCode, '003')
      })
    },
    obtainDeviceType2() {
      testDP({productType:'002'}).then(res => {
        this.tabListVideo = res.data
        ryCreateFlvLive(res.data[0].equipmentCode).then((videoRes) => {
          console.log('-----',videoRes)
          this.videoObj = res.data[0]
          console.log(this.videoObj,'this.videoObj');
          this.videoSrc = this.videoObj.flv
          // for(let i = 0;i < 5;i++) {
          //   this.tabListVideo.push({
          //       "id": 4,
          //       "name": "摄像头",
          //       "sort": 3,
          //       "createTime": 1733982416000,
          //       "equipmentCode": "AK00D31PAJ00089",
          //       "productId": 1,
          //       "equipmentState": null,
          //       "equipmentLocation": null,
          //       "positioning": null,
          //       "productType": "002",
          //       "equipmentType": null,
          //       "flv": "https://cmgw-vpc.lechange.com:8890/flv/LCO/AK00D31PAJ00089/0/1/20241223170857/bf4dccbd1a5849f1841254e36d71425a.flv?proto=https&source=open",
          //       "flvHd": "https://cmgw-vpc.lechange.com:8890/flv/LCO/AK00D31PAJ00089/0/0/20241223170857/af8b42b287b14e2b9e5b06b80ef33fd2.flv?proto=https&source=open"
          //     })
          // }
        })
        // this.ryCreateFlvLive(res.data[0].equipmentCode, '002')
      })
    },
    obtainDeviceType1() {
      testDP({productType:'001'}).then(res => {
        // this.tabListSoil = res.data
        // this.getObtainDeviceData(res.data[0].equipmentCode, '004')
      })
    },
    updateClock() {
      const now = new Date();

      // 获取年月日时分秒
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并填充前导零
      const day = String(now.getDate()).padStart(2, '0'); // 填充前导零
      const hours = String(now.getHours()).padStart(2, '0'); // 填充前导零
      const minutes = String(now.getMinutes()).padStart(2, '0'); // 填充前导零
      const seconds = String(now.getSeconds()).padStart(2, '0'); // 填充前导零

      // 格式化时间字符串
      const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.formattedTime.year = `${year}.${month}.${day}`
      this.formattedTime.time = `${hours}:${minutes}:${seconds}`
      // 更新页面上的时间显示
      // document.getElementById('clock').textContent = formattedTime;
      // console.log(formattedTime);

    },
    changeTab(tab) {
      console.log(tab);
      if(tab.type == '001') {
        // 虫情
        console.log(tab,'虫情');

      }else if(tab.type == '003') {
        // 气象
        this.getObtainDeviceData(this.tabListPhenomena[tab.index].equipmentCode, '003')
      }else if(tab.type == '004') {
        // 土壤
        this.getObtainDeviceData(this.tabListSoil[tab.index].equipmentCode, '004')
      }
    },
    scaleChange(scale) {
      console.log(scale)
    }
  },
  created() {
    this.updateClock();
    this.obtainDeviceType1()
    this.obtainDeviceType2()
    this.obtainDeviceType3()
    this.obtainDeviceType4()
    // 每秒调用一次 updateClock 函数来更新时间
    setInterval(this.updateClock, 1000);
  },
  mounted(){
    this.viewer = new Viewer({
      // （必需的） 将包含全景图或元素标识符的 HTML 元素
      container:document.querySelector('#viewer'),
      // （必需的） 全景路径。必须是默认 equirectangular 适配器的单个 URL。其他适配器支持其他值。
      // photo-sphere-viewer支持多种适配器，这里讲到的是默认的 equirectangular 适配器，使用起来最为简单，但是要求图片必须为全景图
      panorama: this.imgurl1,
      plugins: [
        // [AutorotatePlugin, {
        //     autostartDelay: 10000,
        //     autorotatePitch: '5deg',
        // }],
    ],
      navbar: []
      // 这里定义展示视图的大小，也可以通过CSS在样式中定义
      // size:{
      //   width: '100vw',
      //   height: '100vh',
      // },
    });
  }
}
</script>

<style lang="scss">
$base-bg: rgba(31,104,105,0.1);
$base-border: rgba(0, 178, 160, .1);

/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none;
}
#viewer {
  position: relative;
  height: 100%;
  width: 100%;
  color:#fff;
  -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */ user-select: none; /* 标准语法 */

}
.page-container {
  .top-shadow{
    width: 100%;
    box-shadow: 50px -42px 69px 43px #050A11, 50px 13px 69px 43px #000 inset;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 107px;
    z-index: 2;
  }
  .left-shadow{
    width: calc(360px + 2%);
    height: 100%;
    box-shadow: 185px -242px 171px 46px #050A11 inset;
    position: fixed;
    top: 107px;
    left: 0;
    bottom: 0;
    z-index: 2;
  }
  .bottom-shadow{
    width: 100%;
    box-shadow: 50px -42px 69px 43px #000, 50px 13px
    69px 43px #050A11 inset;
    position: fixed; bottom: 0; left: 0; right: 0; height: 107px;
    z-index: 2;
}
 .right-shadow{
    width:  calc(360px + 2%);
    height: 100%;
    box-shadow: -185px -242px 171px 46px #050A11 inset;
    position: fixed;
    top: 107px;
    right: 0;
    bottom: 0;
    z-index: 2;

  }

  // .left-shadow::after{
  //   display: block;
  //   content: '';
  //   z-index: 1;
  //   width: 360px;
  //   height: 100%;
  //   position: absolute;
  //   left: 100px;
  //   border-radius: 50px;
  //   box-shadow: 0px 0px 20px #091519;
  // }

  .header {
    height: 107px;
    width: 96%;
    margin: 0 auto;
    position: relative;
    z-index: 9;
  //  background-color: rgba(0,0,0,0);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
  }
  .header-info {
    width: 100%;
    display: flex;
    align-items: center;

    height: 100px;
    .header-info-left {
      background-image: url('../../assets/himg02.png');
      background-repeat: no-repeat;
      background-position: 100% 100%;
      background-size: contain;
      display: flex;
      align-items: center;
      height: 100%;
      width: 430px;
    }
    .header-info-right {
      background-image: url('../../assets/himg02.png');
      background-repeat: no-repeat;
      background-position: 100% 100%;
      background-size: contain;
      display: flex;
      align-items: center;
      height: 100%;

      width: 430px;
    }
    .weather {
      width: 131px;
      height: 48px;
      background: rgb(0, 178, 60, 0.2);
      border: 2px solid $base-border;
      display: flex;
      align-items: center;
      justify-content: center;
      .weather-text {
        width: 91px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: rgba(255,255,255,.7);
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .info-bold {
          font-size: 14px;
          font-weight: 600;
        }
        .info-noBold {
          font-size: 12px;
        }
      }
    }
    .date {
      padding: 0 20px;
      overflow: hidden;
      width: 197px;
      height: 48px;
     background: rgb(0, 178, 60, 0.2);
      border: 2px solid $base-border;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      .date-text {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: rgba(255,255,255,.7);

        width: 197px;
        height: 48px;
        // background: #1F6869;

        .date-year {
          font-size: 14px;
          // width: 69px;
          height: 14px;
          margin-right: 8px;
        }
        .date-time {
          font-size: 20px;
          font-weight: 600;
          // width: 80px;
          height: 20px;
          line-height: 21px;
        }
      }
    }
      .line {
        margin-left: 170px;
        width: 129px;
        height: 24px;
        background-image: url('../../assets/himg01.png');
        background-repeat: no-repeat;
        background-position: 100% 100%;
        background-size: contain;
      }
      .line-right {
        margin-right: 104px;
        width: 129px;
        height: 24px;
        background-image: url('../../assets/himg01.png');
        background-repeat: no-repeat;
        background-position: 100% 100%;
        background-size: contain;
        -webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);
      }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 107px;
    background-image: url('../../assets/headbj2.png');
    background-repeat: no-repeat;
    .title-text {
      color: #b0f2c6;
      height: 48px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48px;
      line-height: 48px;
      text-align: left;
      font-style: normal;
      text-transform: none;

    background: linear-gradient(180deg, #C9FDDA, 61%, #10AF45);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    }
  }
  }
  .content {
    // color: rgba(255,255,255,.7);
    font-family: PingFang SC, PingFang SC;
    margin-top: 29px;
    width: 100%;
    display: flex;

  }
    .content-left {
      width: 360px;
      position: absolute;
       // top:160px;
      bottom: 30px;
      left:2%;
      z-index: 9;
      .insect {
        width: 360px;
        height: 358px;
        padding: 20px 16px;
        // background: #1F6869;
        background: $base-bg;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;

        .insect-number {
          margin-top: 16px;
          display: flex;
          align-items: center;
          .insect-number-item {
            width: 160px;
            height: 72px;
            background: rgba(0, 178, 60, .1);
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #D7C412;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .number-item-top {
              .num {
                font-size: 26px;
                margin-right: 2px;
              }
              .danwei {
                font-size: 16px;
              }
            }
            .number-item-btm {
              margin-top: 8px;
              font-weight: 400;
              font-size: 12px;
              color: rgba(255,255,255,.7);
              line-height: 12px;
            }
            &:nth-child(1) {
              margin-right: 8px;
            }
          }
        }
        .line-chart {
          margin-top: 16px;
        }
      }
      .meteorologicalPhenomena {
        margin-top: 12px;
        padding: 20px 16px;
        width: 360px;
        height: 322px;
        // background: #1F6869;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;
        background: $base-bg;

      }
      .video {
        padding: 20px 16px;
        margin-top: 12px;
        width: 360px;
        height: 216px;
        font-size: 12px;
        // background: #1F6869;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;
        background: $base-bg;
        .video-box {
          margin-top: 16px;
          display: flex;
          .video-tab {
              height: 150px;
              overflow-y: auto;
            .video-tab-item {
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 10px;
              width: 64px;
              height: 28px;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid rgba(255,255,255,.7);
              color:rgba(255,255,255,1);
            }
            .active-tab {
              width: 64px;
              height: 28px;
              background: rgba(0, 178, 60, .5);
              border-radius: 4px 4px 4px 4px;
              border: 1px solid rgba(0, 178, 60, .5);
            }
          }
          .video-content {
            margin-left: 10px;
            flex: 1;
            height: 143px;
            border-radius: 2px;
            .video-flv {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .content-center {
      position: fixed;
      bottom: 0;
      // left: 360px;
      height: 220px;
      right: 360px;
      bottom: 30px;
      width: 100%;
      z-index: 9;
      // flex:1;
      margin: 0 20px;
      display: flex;
      align-items: flex-end;
      right: 20.1%;
      width: calc(96% - 720px);
      margin: 0 auto;
      .earlyWarning {
        padding: 20px 16px;
        width: 338px;
        height: 214px;
        // background: #1F6869;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;
        background: $base-bg;
        .earlyWarning-box {
          display: flex;
          align-items: center;
          .earlyWarning-desc {
            margin-left: 50px;
            height: 90px;
            width: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .earlyWarning-desc-item {
              color: rgba(255,255,255,1);
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              &::before {
                content:'';
                position:absolute;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color:#d5871a;
                top: 50%;
                left: -10px;
                transform: translateY(-50%);
              }
              &:nth-child(2) {
                &::before {
                  content:'';
                  position:absolute;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color:rgb(0, 178, 60);
                  top: 50%;
                  left: -10px;
                  transform: translateY(-50%);
                }
                }
              .num {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 3px;
              }
            }
          }
        }
        .pieChart {
          // margin-left: 40px;
          // margin-top: 23px;
        }
      }
      .early-warning-list {
         padding: 20px 16px;
        margin: 0 12px;
        width: 400px;
        height: 214px;
        // background: #1F6869;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;
        background: $base-bg;
        // opacity: 0.1;
        .scroll-list {
          margin-top: 16px;
          width: 368px;
        }
      }
      .monitor {
        color: rgba(255,255,255,.7);
        padding: 20px 16px;
        width: 338px;
        height: 214px;
        // background: #1F6869;
        border-radius: 0px 0px 0px 0px;
        border: 4px solid $base-border;
        // opacity: 0.1;
        background: $base-bg;
        .charts-box {
          margin-top: 16px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          .charts-item {
            width: 84px;
            height: 84px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 12px;
            align-items: center;
            .charts-item-content {

              width: 68px;
              height: 68px;
              border-radius: 50%;
              border : 1px solid #1F6869;
              display: flex;
              align-items: center;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .charts-item-desc {
                margin-top: 4px;
                width: 84px;
              }
            }
         }
        }
        .monitor-btm {
          margin-top: 16px;
          padding: 0 20px;
          align-items: center;
          width: 306px;
          height: 44px;
          display: flex;
          justify-content: space-between;
          .monitor-btm-text {
            padding: 8px;
            font-size: 12px;
            position: relative;
            &::before {
              position: absolute;
              top: 50%;
              left: -4px;
              transform: translateY(-50%);
              content: '';
              width: 8px;
              height: 8px;
              background: #39BFF4 ;
              border-radius: 50%;
              margin-right: 4px;
            }
          }
          .monitor-btm-num {
            text-align: right;
            width: 120px;
            height: 20px;
            line-height: 20px;
            font-weight: 600;
            font-size: 19px;
            color: rgba(255,255,255,.7);
          }
        }

      }
    }
    .content-right {
      width: 360px;
      position: fixed;
      right: 2%;
      // top:160px;
      bottom: 30px;
      z-index: 9;
      .devices-number {
        padding: 16px;
        width: 360px;
        height: 176px;
        // background: #1F6869;
        border: 4px solid $base-border;
        background:rgba(0, 178, 60, 0.1);
        // opacity: 0.1;
        background: $base-bg;
        .devices-number-header {
          padding: 20px;
          width: 328px;
          height: 80px;
          // background: #3c656a;
          display: flex;
          align-items: center;
          .devices-number-icon {
            width: 36px;
            height: 40px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .devices-number-text {
            margin-left: 24px;
            width: 96px;
            height: 16px;
            font-weight: 500;
            font-size: 16px;
            color:#fff;
          }
          .devices-number-num {
            margin-left: 60px;
            font-weight: 600;
            color: #D7C412 ;
          }
        }
        .devices-number-desc {
          margin-top: 12px;
          height: 44px;
          display: flex;
          justify-content: space-between;
          .devices-number-desc-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .devices-number-desc-num {
              color: #00B23C ;
            }
            .devices-number-desc-text {
              color: rgba(255,255,255,.7);
              font-size: 12px;
            }
          }
        }
      }
      .soil-monitoring {
        padding: 20px 16px;
        margin: 12px 0;
        width: 360px;
        height: 444px;
        // background: #1F6869;
        border: 4px solid $base-border;
        // opacity: 0.1;
        background: $base-bg;
        .line-chart {
          margin-top: 16px;
        }
      }
      .spore-monitoring {
        padding: 20px 16px;
        width: 360px;
        height: 274px;
        // background: #1F6869;
        border: 4px solid $base-border;
        // opacity: 0.1;
        background: $base-bg;
        .spore-monitoring-content {
          margin-top: 16px;
          width: 328px;
          height: 160px;
          img {
            width: 100%;
            height: 100%;

          }
        }
      }
    }
}
.weather-box {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;

    .weather-item {
      width: 120px;
      height: 40px;
      display: flex;

      margin-bottom: 34px;
      align-items: center;
      &:nth-child(odd) {
        margin-right: 72px;
      }
      &:nth-last-child(-n+2) {
        margin-bottom: 0;
      }
      .item-img {
        margin-right: 8px;
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-desc {
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(255,255,255,.7);
        .item-title {
          // width: 57px;
          height: 20px;
          font-weight: 600;
          font-size: 20px;
          line-height: 20px;
          text-align: left;
          color: rgba(255,255,255,1);
        }
        .item-content {
          width: 70px;
          height: 14px;
          font-weight: 400;
          font-size: 14px;

          line-height: 14px;
        }
      }
    }
  }
</style>
